<template>
  <div class="person">
    <h2>当温度大于40℃或者水位低于20米时,向服务器发送告警</h2>
    温度:{{ temp }} <br />
    水位:{{ waterMark }}<br />
    <button @click="changeTemp">温度+9</button>
    <button @click="changeWater">水位-5</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { ref, watch, watchEffect } from 'vue'

let temp = ref(16)
let waterMark = ref(32)

function changeTemp() {
  temp.value += 9
}
function changeWater() {
  waterMark.value -= 5
}

// watch 监测需要关注的值
// watch([temp, waterMark], (newVal, oldVal) => {
//   console.log(newVal, oldVal)
//   if (temp.value >= 40 || waterMark.value < 20) {
//     console.log('向服务器发送告警')
//   }
// })

// watchEffect 无需指定关注的值, 会自动判断回调方法中关注的值;启动时就会执行一次回调函数,就像 watch 添加 immediate:true 配置
watchEffect(() => {
  console.log('执行一次')
  if (temp.value >= 40 || waterMark.value < 20) {
    console.log('向服务器发送告警')
  }
})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
